<template>
  <div class="dictclass">
    <!--搜索条件-->
    <el-form :inline="true" :model="querry" class="demo-form-inline" ref="queryForm">
      <el-form-item label="字典名称" prop="dictName">
        <el-input v-model="querry.dictName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="querry.dictType" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="字典状态" prop="status">
        <el-input v-model="querry.status" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker v-model="createDate" size="small" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-button type="primary" @click="buttonAdd('twoForm')">新增</el-button>
    <el-button type="primary" @click="delateValss" :disabled="ids.length===0">删除选中行</el-button> -->

    <!--各种按钮-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="buttonAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="updataValss">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="delateValss">删除
        </el-button>
      </el-col>
      </el-row>

    <!--显示表格-->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="dictId" label="字典主键" width="180">
      </el-table-column>
      <el-table-column prop="dictName" label="字典名称" width="180">
      </el-table-column>
      <el-table-column prop="dictType" label="字典类型">
        <template slot-scope="scope">
          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
            <span>{{ scope.row.dictType }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch @change="statuChange" v-model="scope.row.status" active-value="0" inactive-value="1"
            active-color="#13ce66" inactive-color="#ff4949" :disabled="isStatus">
            ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>


    <!--对话框新增数据-->
    <!-- <el-button type="text" @click="dialogFormVisible = true">新增</el-button> -->
    <el-dialog :title="titileName" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="dictForm" class="demo-form-inline" ref="twoForm">
        <el-form-item label="字典名称" prop="dictName" :label-width="formLabelWidth">
          <el-input v-model="dictForm.dictName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典状态" prop="status" :label-width="formLabelWidth">
          <el-select v-model="dictForm.status" placeholder="请选择活动区域">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType" :label-width="formLabelWidth">
          <el-input v-model="dictForm.dictType" autocomplete="off"></el-input>

        </el-form-item>
        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input v-model="dictForm.remark" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCanle">取 消</el-button>
        <el-button type="primary" @click="dialogForm ('twoForm')">确 定</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resettwoForm">重置</el-button>
      </div>
    </el-dialog>

    <!--分页    此处不需要分页-->
   <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="this.querry.page" :page-sizes="[2, 5, 10, 20]" :page-size="this.querry.size"
      layout="total, sizes, prev, pager, next, jumper" :total="this.totalNum">
    </el-pagination>


  </div>
</template>

<script>
  import {
    getDate,
    dictAdd,
    dictDel,
    dictDelOne,
    dictUpdate

  } from '../../../api/dict.js'

  export default {
    name: "dict",
    data() {
      return {
        titileName: '增加字典',
        querry: {
          page: 1,
          size: 10,
          dictName: undefined,
          dictType: undefined,
          status: undefined
        },
        totalNum:undefined,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        statusAll: [{
          valueAAA: 0,
          labelAAA: "正常"
        }, {
          valueAAA: 1,
          labelAAA: "禁用"
        }],
        //表格中的状态禁用
        isStatus:true,
        //时间选择器的值
        createDate: [],
        //修改的数据
        dictDaress: [],
        tableData: [],
        //对话框是否是增加功能
        isAdd: true,
        //对话框默认关闭
        dialogFormVisible: false,

        //选中数据的所有id
        ids: [],
        //选中数据的所有数据
        totalForData:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        dictForm: {
          dictName: undefined,
          status: undefined,
          dictType: undefined,
          remark: undefined,
          createTime: undefined,

        },
        //对话框尺寸
        formLabelWidth: '120px'

      }
    },
    methods: {

      //选中修改按钮
      updataValss(){
      this.isAdd = false
      this.dialogFormVisible = true
      this.titileName = '选中修改'
        this.dictForm = this.totalForData[0]
        dictUpdate(this.dictForm)
        this.handleQuery()

      },
      //状态开关发生变化时触发的函数  有返回值 返回值是变化后的值
      statuChange(){

      },
      buttonAdd() {
        this.dialogFormVisible = true
        this.titileName = '新增字典'
        this.isAdd = true
        this.resettwoForm('twoForm')
      },
      resettwoForm(twoForm) {
        // this.$refs[twoForm].resetFields();
      },
      //查询
      handleQuery() {
        this.loadData()
      },
      resetQuery(queryForm) {
        // this.$refs[queryForm].resetFields();
        this.createDate = []
        this.loadData()
      },
            //每页条数
      handleSizeChange(a) {
        this.querry.size = a
        this.loadData()
      },
            //当前页码
      handleCurrentChange(a) {
        this.querry.page = a
        this.loadData()
      },

      //点击修改
      handleUpdate(a) {
        //改变为修改状态
        this.isAdd = false
        this.dialogFormVisible = true
        this.titileName = '修改字典'
        this.dictForm = a
      },
      //点击删除
      handleDelete(b) {
        dictDelOne(b.dictId).then(r => {
          this.handleQuery()
        })
      },
      //对话框的重置按钮
      resettwoForm() {
        this.dictForm = {}
      },
      //对话框的取消按钮
      dialogCanle() {
        this.dialogFormVisible = false
        if (!this.isAdd) {
          this.dictForm = {}
        }
      },

      //新增的确定按钮   此处注意添加字典数据时 字典的类型不能重复否则数据库重复异常
      dialogForm(twoForm) {
        if (this.isAdd) {
          dictAdd(this.dictForm).then(resp => {
            this.handleCurrentChange(1)
            this.dictForm = {}
          }).catch(e => {
            console.log(e)
          })
          //this.$refs[twoForm].resetFields();
        }
        if (!this.isAdd) {
          //this.dictDaress = this.dictForm
          dictUpdate(this.dictForm).then(resp => {
            this.dictForm = {}
            this.loadData()
          })
        }
        this.dialogFormVisible = false
      },
      //点击多选
      handleSelectionChange(selection) {
        this.totalForData=selection
        this.ids = selection.map(item => item.dictId)
        this.single = selection.length != 1
        this.multiple = !selection.length

      },
      delateValss() {
        var abc = {
          'delIds': this.ids
        }
        dictDel(abc).then(resp => {
          this.handleCurrentChange(1)
          this.ids = []
        }).catch(a => {
          console.log(a)
        })
      },
      //加载数据
      loadData() {
        //现将日期移除
        if (this.querry.hasOwnProperty('map')) {
          delete this.querry['map']
        }
        //如果日期长度大于2 则填入到搜索方法中
        if (this.createDate.length === 2) {
          let map = {}
          map['begin'] = this.createDate[0]
          map['end'] = this.createDate[1]
          this.querry.map = map
        }
        getDate(this.querry).then(resp => {
          this.tableData = resp.data
          this.totalNum=resp.count
        })
      }
    },
    created() {
      this.loadData()
    }
  }
</script>

<style>
</style>
